<script setup lang="ts">
import { reactive, toRaw } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import {
  offline_course_create_order_api,
  offline_course_order_mini_pay_api,
} from "@/package/mall/api/guider_home";
import { EV_ORDER } from "@/constant/event";
import { requestPayment } from "@/utils/payment";
import { strReplaceByLen } from "@/utils/string";
import { Router } from "@/utils/router";
import { Toast } from "@/utils/toast";

import OrderSettleBar from "../goods/components/order-settle-bar.vue";

onLoad((options) => {
  infoData.name = decodeURIComponent(options?.name);
  infoData.price = options?.price;
  infoData.balancePrice = options?.balancePrice;
  tempData.id = options?.id;
});

const formData = reactive({
  buyer_name: "",
  id_card: "",
  buyer_phone: "",
  sex: 1,
  nationality: "",
  address: "",
  desc: "",
});
const formClick = () => {
  Router.navigateTo("/package/mall/pages/train/contacts", (resp) => {
    resp.eventChannel.emit("ev-contacts-data", toRaw(formData));
    resp.eventChannel.once("ev-contacts-edit", (resp) => {
      if (resp) {
        formData.buyer_name = resp.buyer_name;
        formData.id_card = resp.id_card;
        formData.buyer_phone = resp.buyer_phone;
        formData.sex = resp.sex;
        formData.nationality = resp.nationality;
        formData.address = resp.address;
        formData.desc = resp.desc;
        Router.navigateBack();
      }
    });
  });
};

const infoData = reactive({ name: "", price: "", balancePrice: "" });

const payClick = () => {
  Toast.showLoading();
  offline_course_create_order_api({
    offline_course_id: tempData.id,
    ...toRaw(formData),
  })
    .then((resp) => {
      return offline_course_order_mini_pay_api({
        order_id: resp.order_id,
      }).then((resp) => {
        Toast.hideLoading();
        requestPayment(
          resp,
          () => {
            uni.$emit(EV_ORDER, {
              type: "pay",
              data: { type: "train", id: tempData.id },
            });
            Router.redirectTo("/package/my/pages/order/list");
          },
          () => {
            Router.redirectTo("/package/my/pages/order/list");
          }
        );
      });
    })
    .catch(() => Toast.hideLoading());
};

const tempData = { id: "" };
</script>

<template>
  <view class="order-form" @click="formClick">
    <view class="order-form-title">报名信息</view>
    <template v-if="formData.buyer_name">
      <view class="order-form-item">
        <view class="order-form-label">{{ formData.buyer_name }}</view>
        <view class="order-form-value">{{ formData.buyer_phone }}</view>
      </view>
      <view class="order-form-item">
        <view class="order-form-label">身份证</view>
        <view class="order-form-value">
          {{ strReplaceByLen(formData.id_card, 6) }}
        </view>
      </view>
    </template>
    <view class="order-form-item" v-else>
      <image
        class="order-form-wraning"
        src="@/package/mall/static/train-order.png"
      />
      <view class="order-form-value">请填写报名信息</view>
    </view>
  </view>

  <view class="order-info">
    <view class="order-info-title">订单信息</view>
    <view class="order-info-item">
      <view class="order-info-label">课程</view>
      <view class="order-info-name">{{ infoData.name }}</view>
    </view>
    <view class="order-info-item">
      <view class="order-info-label">首期款</view>
      <view class="order-info-price">
        <text class="order-info-price2"></text>{{ infoData.price }}
      </view>
    </view>
    <view class="order-info-item">
      <view class="order-info-label">尾款</view>
      <view class="order-info-price">
        <text class="order-info-price2"></text>{{ infoData.balancePrice }}
      </view>
      <view class="order-info-desc">尾款将在课程结束后额外支付</view>
    </view>
  </view>

  <view class="order-fixed">
    <OrderSettleBar
      title="定金"
      :price="infoData.price"
      @btn-click="payClick"
    />
  </view>
</template>

<style lang="scss">
page {
  padding-top: 20rpx;
}

.order-form {
  padding: 30rpx 20rpx 0;
  margin: 0 30rpx 20rpx;
  border-radius: 20rpx;
  background-color: #ffffff;

  .order-form-title {
    padding-left: 20rpx;
    margin-bottom: 30rpx;
    font-size: 32rpx;
    color: #333333;
    line-height: 44rpx;
    font-weight: bold;
  }

  .order-form-item {
    display: flex;
    align-items: center;
    height: 100rpx;
    border-top: 2rpx solid #f1f1f1;
  }

  .order-form-label,
  .order-form-value {
    font-size: 28rpx;
    color: #666666;
  }

  .order-form-label {
    flex-shrink: 0;
    width: 130rpx;
  }

  .order-form-value {
    flex-grow: 1;
    min-width: 0;
  }

  .order-form-wraning {
    flex-shrink: 0;
    width: 40rpx;
    height: 40rpx;
    margin-right: 20rpx;
  }
}

.order-info {
  padding: 30rpx 20rpx 0;
  margin: 0 30rpx 20rpx;
  border-radius: 20rpx;
  background-color: #ffffff;

  .order-info-title {
    padding-left: 20rpx;
    margin-bottom: 30rpx;
    font-size: 32rpx;
    color: #333333;
    line-height: 44rpx;
    font-weight: bold;
  }

  .order-info-item {
    display: flex;
    align-items: center;
    min-height: 60rpx;
    padding: 20rpx 0;
    border-top: 2rpx solid #f1f1f1;
  }

  .order-info-name {
    flex-grow: 1;
    min-width: 0;
    font-size: 30rpx;
    color: #2d2d2d;
    line-height: 42rpx;
  }

  .order-info-label {
    flex-shrink: 0;
    width: 96rpx;
    font-size: 28rpx;
    color: #666666;
  }

  .order-info-price {
    flex-shrink: 0;
    font-size: 44rpx;
    color: #fa6400;
    line-height: 60rpx;
    font-weight: bold;
  }

  .order-info-price2 {
    margin-right: 4rpx;
    font-size: 24rpx;
    line-height: 34rpx;
  }

  .order-info-desc {
    flex-grow: 1;
    min-width: 0;
    margin-left: 10rpx;
    font-size: 26rpx;
    color: #999999;
  }
}

.order-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 104rpx;
  padding-top: 16rpx;
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #ffffff;
  z-index: 8;
}
</style>